<script setup lang='ts'>
import { useRouter } from 'vue-router';
import { onMounted, ref, computed } from 'vue';
import { useSearchStore } from '@/stores/search'

// 引入封装的组件
import GoodsListVue from '@/components/GoodsListVue.vue'
// 调用仓库
const searchStore = useSearchStore()
const router = useRouter();
const home = () => {
    // 返回主页
    router.push("/home")
}

const val = ref('')
const onClickButton = async () => {
    await searchStore.getSearchListHandler({ count: 1, limitNum: 100, keyword: val.value })
}
// 使用计算属性拿搜索数据
const searchList = computed(() => {
    return searchStore.searchList
})

//   使用钩子调用热门搜索请求
onMounted(() => {
    searchStore.getHotwordListHandler()
})
// 使用计算属性获取热门搜索数据
const hotList = computed(() => {
    let list:any[] =[]
    if (searchStore.hotList.length != 0) {
         searchStore.hotList.forEach(item => { 
    if ((item as any).keyword != undefined && (item as any).keyword !='') {
    
         list.push( item  )
    }   
     })
    }
    return list
})
// 热门搜索的点击搜索功能
const ktyWord = async (kty:any) => {
    await searchStore.getSearchListHandler({ count: 1, limitNum: 100, keyword: kty })
}
</script>
<template>
    <div class="saarch">
        <div class="top">
            <div>
                <van-icon size="26px" name="arrow-left" @click="home" />
            </div>
            <div class="right">
                <van-search v-model="val" show-action placeholder="请输入搜索关键词" @search="onClickButton">
                    <template #action>
                        <div class="saa" @click="onClickButton">搜索</div>
                    </template>
                </van-search>
            </div>
        </div>
        <!-- 搜索 -->
        <van-cell-group>
            <van-cell title="搜索历史" value="隐藏" />
        </van-cell-group>
        <div class="cell">
               
            <van-tag round type="primary" size="large" color="#cdd1d3" text-color="orangered">标签</van-tag>
            <van-tag round type="primary" size="large" color="#cdd1d3" text-color="orangered">标签</van-tag>
            <van-tag round type="primary" size="large" color="#cdd1d3" text-color="orangered">标签</van-tag>
            <van-tag round type="primary" size="large" color="#cdd1d3" text-color="orangered">标签</van-tag>
            <van-tag round type="primary" size="large" color="#cdd1d3" text-color="orangered">标签</van-tag>
            <van-tag round type="primary" size="large" color="#cdd1d3" text-color="orangered">标签</van-tag>


        </div>
        <!-- 热门搜索 -->
        <van-cell-group>
            <van-cell title="热门搜索" value="隐藏" />
        </van-cell-group>
        <div class="cell" >
            <van-tag round type="primary" size="large" v-for="item in hotList"  :key="item.wordid"  @click="ktyWord(item.keyword)">{{item.keyword}}</van-tag>
    
        </div>
        <!-- 搜索结果 -->
        <van-cell-group>
            <van-cell title="搜索结果" />
        </van-cell-group>
        <div class="details">
            <GoodsListVue :GoodsList="searchList"></GoodsListVue>
        </div>

    </div>
</template>
<style scoped lang='scss'>


.top {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    background-color: #fff;

    .van-icon {
        margin-top: 26px;
    }
}

.van-search {
    width: 700px;
}

.saa {
    font-weight: 700;
    margin-right: 20px;
}

.van-tag {
    margin: 20px;
}

.details {
    margin-top: 20px;
}
</style>